// 列表页-业务模块

import axios from 'axios';
import {$} from './utils.js';

// 保持登录状态
import './loginStatus.js';

// 缓存数据 
let pages = 0;// 记录总页数
let page = 1;// 记录当前页码
let size = 4;// 记录每页条数

// 进入页面获取第一页数据并渲染页面
getPageData(page,size);

// 获取某页数据
function getPageData(page,size){
    // 发送请求
    axios({
        method: 'get',
        url: 'http://localhost:9090/goods/getpage',
        params: {
            'page': page,
            'size': size
        }
    })
    .then((response)=>{
        let {data} = response;
        if (data.code === 1) {
            // 记录总页数
            pages = data.pages;
            console.log( pages );

            // 根据数据渲染表格
            renderTable(data.data);

            // 根据总页数渲染分页
            renderPages(pages);
        }
    })
    .catch(()=>{
        alert('网络异常，请刷新重试！');
    });
}

// 根据数据渲染表格
function renderTable(arr){
    let tmp = `<tr>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品描述</th>
                <th>商品类型</th>
                <th>商品图片</th>
                <th>操作</th>
            </tr>`;

    // 遍历数组
    arr.forEach(item=>{
        tmp += `<tr>
                    <td>${item.name}</td>
                    <td>${item.price}</td>
                    <td>${item.desc}</td>
                    <td>${item.type}</td>
                    <td>
                        <img src="${item.imgurl}" alt="">
                    </td>
                    <td>
                        <button class="btn btn-success btn-xs">
                            <span class="glyphicon glyphicon-pencil"></span> 编辑
                        </button>
                        <button class="btn btn-danger btn-xs">
                            <span class="glyphicon glyphicon-remove"></span> 删除
                        </button>
                    </td>
                </tr>`;
    });

    // 将拼接好的结构添加到table中
    $('.table').innerHTML = tmp;

    // 给 删除 按钮添加点击事件
    let btnDels = $('.btn-danger');
    for (var i = 0; i < btnDels.length; i++) {
        btnDels[i].onclick = function (){
            // 获取当前商品名称
            let name = this.parentNode.parentNode.firstElementChild.innerText;

            // 1.后端删除该条数据
            axios({
                method: 'get',
                url: 'http://localhost:9090/goods/del',
                params: {name}
            })
            .then((res)=>{
                alert(res.data.msg);
                if (res.data.code === 1) {
                    // 2.前端删除当前行
                    this.parentNode.parentNode.remove();
                }
            })
            .catch(()=>{
                alert('网络异常，请重试！');
            });
        };
    }

    // 给 编辑 按钮添加点击事件
    let oname;
    let btnEdits = $('.btn-success');
    for (var n = 0; n < btnEdits.length; n++) {
        btnEdits[n].onclick = function (){
            // 显示模态框
            $('#edit').style.display = 'block';

            // 当前编辑按钮所在的tr
            let tr = this.parentNode.parentNode;

            // 获取商品原始名称
            oname = tr.children[0].innerText;
            // console.log( oname );

            // 回填商品原始数据
            $('#name').value = tr.children[0].innerText;
            $('#price').value = tr.children[1].innerText;
            $('#desc').value = tr.children[2].innerText;
            $('#type').value = tr.children[3].innerText;
            $('#imgurl').value = tr.children[4].firstElementChild.src;
        };
    }

    // 上传图片
    $('.upload').onsubmit = function (e){
        e.preventDefault();// 阻止表单提交

        // 创建FormData对象，收集表单数据
        let fromdata = new FormData(this);

        // 发送请求
        axios({
            method: 'post',
            url: 'http://localhost:9090/goods/upload',
            data: fromdata
        })
        .then((res)=>{
            alert(res.data.msg);
            if (res.data.code === 1) {
                // 上传成功，修改图片地址
                $('#imgurl').value = res.data.imgurl;
            }
        })
        .catch(()=>{
            alert('网络异常，请重试！');
        });
    };

    // 保存修改
    $('#save').onclick = function (){
        // 获取商品数据
        let name = $('#name').value;
        let price = $('#price').value;
        let desc = $('#desc').value;
        let type = $('#type').value;
        let imgurl = $('#imgurl').value;

        // 发送请求
        axios({
            method: 'post',
            url: 'http://localhost:9090/goods/udate',
            data:{oname,name,price,desc,type,imgurl}
        })
        .then((res)=>{
            alert(res.data.msg);
            if (res.data.code === 1) {
                // 修改成功，关闭模态框
                $('#edit').style.display = 'none';

                getPageData(page,size);
            }
        })
        .catch(()=>{
            alert('网络异常，请重试！');
        });
    };

    // 点击 X 关闭模态框
    $('.close').onclick = function (){
        // 隐藏模态框
        $('#edit').style.display = 'none';
    };
}

// 根据总页数渲染分页
function renderPages(pages){
    let tmp = `<li class="prev">
                <a href="#" aria-label="Previous">&laquo;</a>
            </li>`;

    // 循环生成pages个页码（li）
    for (var i = 1; i <= pages; i++) {
        tmp += `<li class="number"><a href="#">${i}</a></li>`;
    }

    tmp += `<li class="next">
                <a href="#" aria-label="Next">&raquo;</a>
            </li>`;

    // 将拼接好的结构添加到页面中
    $('.pagination').innerHTML = tmp;

    // 设置选中项状态
    $('.pagination').children[page].className = 'active';
}

// 改变每页条数
$('#size').onchange = function (){
    // 修改page
    page = 1;
    // 修改size
    size = this.value;
    // 重新获取数据并渲染页面
    getPageData(page,size);
};

// 给 动态元素/未来元素 添加事件（事件委托）
$('.pagination').onclick = function (e){
    // 判断事件目标/源（下一页）
    if (e.target.parentNode.className === 'next') {
        page++;
        if (page > pages) {
            page = pages;
            return;
        }
        // 重新获取数据并渲染页面
        getPageData(page,size);
    }
    // 判断事件目标/源（上一页）
    if (e.target.parentNode.className === 'prev') {
        page--;
        if (page < 1) {
            page = 1;
            return;
        }
        // 重新获取数据并渲染页面
        getPageData(page,size);
    }
    // 判断事件目标/源（任意页）
    if (e.target.parentNode.className === 'number') {
        page = Number(e.target.innerText);
        // 重新获取数据并渲染页面
        getPageData(page,size);
    }
};

// 关键字搜索
$('.btn-primary').onclick = function (){
    // 获取输入内容
    let kw = $('#kw').value;

    // 空值判断
    if (!kw) {
        alert('搜索内容不能为空！');
        return;
    }

    // 发送搜索请求
    // 接口地址：http://localhost:9090/goods/search
    // 请求方式：get
    // 请求参数：kw 搜索关键字
    // 返回值：{"code":1,"msg":"查询成功！","data":arr} <- data
    axios({
        method: 'get',
        url: 'http://localhost:9090/goods/search',
        params: {kw}
    })
    .then((response)=>{
        let {data} = response;
        if (data.code === 1) {
            // 根据数据渲染表格
            renderTable(data.data);
        } else {
            $('.table').innerHTML = `<h1>暂无数据！</h1>`;
        }
    })
    .catch(()=>{
        alert('网络异常，请重试！');
    });
};
